<template>
	<!-- <image class="br-8"  :src="url" :style="style"  :mode="mode" @load="loaded"></image> -->
	<image :src="url" mode="aspectFill" style="width: 500rpx;height: 500rpx;"></image>
</template>

<script>
	export default {
		name:"media-img",
		props:{
			url:{
				type:String,
				default:''
			},
		
		},
		data() {
			return {
				width:200,
				height:200
			};
		},
		computed:{
			mode(){
				return 'widthFix';
				if(this.width>this.height){
					return 'widthFix';
				}else if(this.width<this.height){
					return 'heightFix';
				}
				return 'aspectFit';
			},
			style(){
				return '440rpx';
				if(this.width>this.height){
					return {
						width:'506rpx',
					}
				}else if(this.width<this.height){
					return {
						height:'632rpx',
					}
				}
				return  {
						width:'506rpx',
						height:'506rpx',
					}
			}
		},
		methods: {
			loaded({detail}){
				let {width,height}=detail;
				this.width=width;
				this.height=height;
			}
		},
	}
</script>

<style lang="scss">

</style>